<script setup lang="ts">
import { ref } from 'vue'
// 国际化
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useUserStore } from './store/modules/user'
import { storeToRefs } from 'pinia'

const isShowSearch = ref(false)
const scroll = ({ scrollTop }) => {
  scrollTop > 480 ? (isShowSearch.value = true) : (isShowSearch.value = false)
}

// loginbox
const { isShowLoginBox } = storeToRefs(useUserStore())
</script>

<template>
  <div class="app">
    <el-config-provider :locale="zhCn">
      <app-header class="app-header" :isShowSearch="isShowSearch"></app-header>
      <div class="main">
        <el-scrollbar height="100%" @scroll="scroll">
          <router-view></router-view>
        </el-scrollbar>
      </div>
      <app-footer></app-footer>
      <!-- 登录组件 -->
      <login-box v-if="isShowLoginBox"></login-box>
    </el-config-provider>
  </div>
</template>

<style scoped lang="less">
.app {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .app-header {
    position: relative;
  }
  .main {
    height: calc(100% - 120px);
  }
}
</style>
